<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="./js/jquery-3.7.1.min.js"></script>
  <script !src="">
    $(function () {
        $("#d1").click(function () {
          $("div").show(2000)
          $("div").slideDown()
        })

        $("#d2").on('click',function () {
          $("div").hide(2000)
          $("div").slideUp()
        })

    })

    function toggleFn() {
      // $("div").fadeToggle(2000)
      // $('div').slideToggle(2000)
      $("div").toggle('slow')
    }

  </script>
</head>
<body>
<input type="button" value="点击按钮显示div" id="d1">
<input type="button" value="点击按钮隐藏div" id="d2">
<input type="button" value="点击按钮切换div的显示与隐藏" id="d3" onclick="toggleFn()">

<div style="background-color: #CC66FF; width: 250px;height: 250px;">

</div>


</body>
</html>